<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点颜色测试 - 知识图谱</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .test-section {
            margin-bottom: 30px;
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .test-section h2 {
            color: #FFD700;
            margin-top: 0;
            font-size: 1.5em;
        }
        
        .color-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .color-item {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 10px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .color-box {
            width: 30px;
            height: 30px;
            border-radius: 6px;
            margin-right: 12px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        
        .color-info {
            flex: 1;
        }
        
        .type-name {
            font-weight: bold;
            font-size: 1.1em;
        }
        
        .color-code {
            font-size: 0.9em;
            opacity: 0.8;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }
        
        .stat-item {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .stat-number {
            font-size: 2em;
            font-weight: bold;
            color: #FFD700;
        }
        
        .stat-label {
            font-size: 0.9em;
            opacity: 0.9;
            margin-top: 5px;
        }
        
        .node-list {
            max-height: 400px;
            overflow-y: auto;
            background: rgba(0, 0, 0, 0.2);
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }
        
        .node-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .node-item:last-child {
            border-bottom: none;
        }
        
        .node-color {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            margin-right: 10px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        
        .node-name {
            font-weight: bold;
            margin-right: 10px;
            min-width: 120px;
        }
        
        .node-type {
            background: rgba(255, 255, 255, 0.2);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8em;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            font-size: 1.2em;
            opacity: 0.8;
        }
        
        .error {
            background: rgba(255, 0, 0, 0.2);
            border: 1px solid rgba(255, 0, 0, 0.5);
            padding: 15px;
            border-radius: 8px;
            color: #FFB3B3;
        }
        
        /* 自定义滚动条 */
        .node-list::-webkit-scrollbar {
            width: 8px;
        }
        
        .node-list::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        
        .node-list::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
        }
        
        .node-list::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎨 节点颜色分配测试</h1>
        
        <div class="test-section">
            <h2>📊 图数据统计</h2>
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-number" id="nodeCount">-</div>
                    <div class="stat-label">节点数量</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="edgeCount">-</div>
                    <div class="stat-label">边数量</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="typeCount">-</div>
                    <div class="stat-label">节点类型</div>
                </div>
            </div>
        </div>
        
        <div class="test-section">
            <h2>🌈 节点类型颜色映射</h2>
            <div id="colorMapping" class="loading">正在加载颜色映射...</div>
        </div>
        
        <div class="test-section">
            <h2>📋 节点列表（前50个）</h2>
            <div id="nodeList" class="loading">正在加载节点数据...</div>
        </div>
    </div>

    <script type="module">
        import { Graph } from './core/Graph.js'
        
        async function loadAndTestColors() {
            try {
                console.log('开始加载图数据...')
                
                // 加载图数据
                const response = await fetch('./data/exported_graph_data.json')
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`)
                }
                
                const graphData = await response.json()
                console.log('图数据加载完成:', graphData)
                
                // 创建图实例并设置数据
                const graph = new Graph()
                graph.setData(graphData)
                
                // 获取统计信息
                const stats = graph.getStats()
                document.getElementById('nodeCount').textContent = stats.nodeCount
                document.getElementById('edgeCount').textContent = stats.edgeCount
                
                // 分析节点类型
                const typeColorMap = graph.generateTypeColorMapping(graphData.nodes || [])
                const typeCount = Object.keys(typeColorMap).length
                document.getElementById('typeCount').textContent = typeCount
                
                // 显示颜色映射
                displayColorMapping(typeColorMap)
                
                // 显示节点列表
                displayNodeList(graph, typeColorMap)
                
                console.log('颜色测试完成!')
                
            } catch (error) {
                console.error('加载数据时出错:', error)
                document.getElementById('colorMapping').innerHTML = 
                    `<div class="error">❌ 加载失败: ${error.message}</div>`
                document.getElementById('nodeList').innerHTML = 
                    `<div class="error">❌ 加载失败: ${error.message}</div>`
            }
        }
        
        function displayColorMapping(typeColorMap) {
            const container = document.getElementById('colorMapping')
            const types = Object.keys(typeColorMap).sort()
            
            if (types.length === 0) {
                container.innerHTML = '<div class="error">❌ 未找到节点类型</div>'
                return
            }
            
            const colorGrid = document.createElement('div')
            colorGrid.className = 'color-grid'
            
            types.forEach(type => {
                const color = typeColorMap[type]
                const colorItem = document.createElement('div')
                colorItem.className = 'color-item'
                
                colorItem.innerHTML = `
                    <div class="color-box" style="background-color: ${color}"></div>
                    <div class="color-info">
                        <div class="type-name">${type}</div>
                        <div class="color-code">${color}</div>
                    </div>
                `
                
                colorGrid.appendChild(colorItem)
            })
            
            container.innerHTML = ''
            container.appendChild(colorGrid)
        }
        
        function displayNodeList(graph, typeColorMap) {
            const container = document.getElementById('nodeList')
            const nodes = Object.values(graph.nodes).slice(0, 50) // 只显示前50个节点
            
            if (nodes.length === 0) {
                container.innerHTML = '<div class="error">❌ 未找到节点数据</div>'
                return
            }
            
            const nodeList = document.createElement('div')
            nodeList.className = 'node-list'
            
            nodes.forEach(node => {
                const nodeData = node.data[0] || {}
                const nodeType = nodeData.type || 'default'
                const nodeColor = nodeData.color || typeColorMap[nodeType] || '#888888'
                
                const nodeItem = document.createElement('div')
                nodeItem.className = 'node-item'
                
                nodeItem.innerHTML = `
                    <div class="node-color" style="background-color: ${nodeColor}"></div>
                    <div class="node-name">${node.name}</div>
                    <div class="node-type">${nodeType}</div>
                `
                
                nodeList.appendChild(nodeItem)
            })
            
            container.innerHTML = ''
            container.appendChild(nodeList)
        }
        
        // 页面加载完成后开始测试
        window.addEventListener('load', loadAndTestColors)
    </script>
</body>
</html>



